<template>
  <div>
    <div class="DescriptionTitle">{{ $t('projectQuotaInquireTitle') }}</div>
    <el-descriptions direction="horizontal" :column="24" border>
      <el-descriptions-item :label="$t('quoteNo')" :span="8" content-class-name="label-with-150">{{ `${projectQuotaInformation.quote_no ||''}` }}</el-descriptions-item>
      <el-descriptions-item :label="$t('quoteType')" :span="8" content-class-name="label-with-150">{{ projectQuotaInformation.quote_type_desc }}</el-descriptions-item>
      <el-descriptions-item :label="$t('quoteDate')" :span="8" content-class-name="label-with-150">{{ projectQuotaInformation.quote_date }}</el-descriptions-item>
      <el-descriptions-item :label="$t('quoteContent')" :span="24" content-class-name="label-with-150">{{ projectQuotaInformation.quote_content }}</el-descriptions-item>
      <el-descriptions-item :label="$t('quoteAmount')" :span="8" content-class-name="label-with-150">{{ projectQuotaInformation.quote_amount }}</el-descriptions-item>
      <el-descriptions-item :label="$t('quoteCurrency')" :span="8" content-class-name="label-with-150">{{ projectQuotaInformation.quote_curr }}</el-descriptions-item>
      <el-descriptions-item :label="$t('standardCurrency')" :span="8" content-class-name="label-with-150">{{ projectQuotaInformation.standard_curr }}</el-descriptions-item>
      <el-descriptions-item :label="$t('rate')" :span="8" content-class-name="label-with-150">{{ projectQuotaInformation.exchange_rate }}</el-descriptions-item>
      <el-descriptions-item :label="$t('standardAmount')" :span="8" content-class-name="label-with-150">{{ projectQuotaInformation.rate_amount }}</el-descriptions-item>
      <el-descriptions-item :label="$t('quoteDays')" :span="8" content-class-name="label-with-150">{{ projectQuotaInformation.quote_days }}</el-descriptions-item>
      <el-descriptions-item :label="$t('receiveDate')" :span="8" content-class-name="label-with-150">{{ projectQuotaInformation.receive_date }}</el-descriptions-item>
      <el-descriptions-item :label="$t('quoteNote')" :span="8" content-class-name="label-with-150">{{ projectQuotaInformation.note }}</el-descriptions-item>
    </el-descriptions>
  </div>
</template>
<script>
export default {
  name: 'ProjectQuotaInformation',
  props: {
    projectQuotaInformation: {
      required: true,
      type: Object
    }
  }
}
</script>

<style scoped>
.DescriptionTitle {
    margin: 10px 0;
    font-size: 16px;
}

.clearfix::after {
    content: "";
    clear: both;
    display: table;
}

div .DescriptionDiv {
    float: left;
    box-sizing: border-box;
    border-left: 10px solid transparent;
}

div .DescriptionWidth25 {
    width: 25%
}

div .DescriptionWidth50 {
    width: 50%
}

div .DescriptionWidth75 {
    width: 75%
}

div .DescriptionWidth100 {
    width: 100%
}

div .DescriptionDivMarginLeftRemove {
    margin-left: -10px;
}

.label-with-150 {
    width: 150px;
}

</style>
